<template>
  <router-view v-slot="{ Component }" v-wechat-title="$route.meta.title">
    <transition>
      <keep-alive :include="keepAlive">
        <component class="child-view" :is="Component"/>
      </keep-alive>
    </transition>
  </router-view>
</template>

<script setup>
import {computed, onMounted} from "vue";
import {useStore} from "vuex";

const store = useStore()

onMounted(() => {

});

const keepAlive = computed(() => store.state.keepAlive)
</script>

<style scoped>
.child-view {
  　　margin: 300px auto;
  　　width: 100%;
  　　height: 100%;
  　　transition: all .5s cubic-bezier(.55,0,.1,1);
}
.slide-left-enter, .slide-right-leave-active {
  　　opacity: 0;
  　　-webkit-transform: translate(30px, 0);
  　　transform: translate(30px, 0);
}
.slide-left-leave-active, .slide-right-enter {
  　　opacity: 0;
  　　-webkit-transform: translate(-30px, 0);
  　　transform: translate(-30px, 0);
}
</style>
